<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>添加图片素材</title>
    <style>
        .tier_top{width: 100%;height: 34px;margin-bottom: 20px;}
        .tier    {width: 25%; height: 34px;padding: 6px 12px 6px 0px;border: 1px solid #d2d6de;margin-right: 7px;float: left;}
        .tier_child{width: 25%; height: 34px;padding: 6px 12px 6px 0px;border: 1px solid #d2d6de;margin-right: 7px;float: left;}
        .tier_pool{width: 25%; height: 34px;padding: 6px 12px 6px 0px;border: 1px solid #d2d6de;margin-right: 7px;float: left;}
        .tier_del{width: 34px;height: 34px;line-height: 34px;text-align: center;background: #e74c3c;color: #ffffff;border-radius: 3px;cursor: pointer;float: left;}
        .tier_add{width: 80px;height: 34px;line-height: 34px;text-align: center;background: #18bc9c;color: #ffffff;border-radius: 3px;border: 0px;cursor: pointer;}
        .uploadimg{width: 150px;height: 100px;color: #d2d2d2;font-size: 120px;line-height: 100px;text-align: center;border: 1px solid #d2d2d2;margin-left: 0px;float: left;cursor: pointer;}
        .img_list{width: 150px;height: 100px;margin-left: 0px;cursor: pointer;}
        .img-top{width: 150px;height: 150px;float: left;margin-right: 15px;}
        .del-img{width: 150px;height: 20px;line-height: 20px;color: #ffffff;text-align: center;background: #e74c3c;border-radius: 3px;cursor: pointer;}
    </style>
</head>
<body>
<div class="box">
    <!-- /.box-header -->
    <section class="content">
        <div class="box-body">
            <form role="form">
                <div class="form-group col-md-7">
                    <label>图片</label>
                    <div class="timeline-body" >
                        <div id="fodder-img-list">
                            <!--图片预览位置-->
                        </div>
                        <div id="uploadimg" class="margin uploadimg" title="点击上传图片">+</div>
                    </div>
                    <div style="width: 100%;color: red;font-weight: bold;clear: both;">
                        图片大小请不要超过2M。如果不保存，请先删除上传的图片在关闭该弹窗
                    </div>
                </div>
                <div class="form-group col-md-7">
                    <label>图片位置</label>
                    <select id="place" class="form-control">
                        <option value="0">封面图</option>
                        <option value="1">位置一</option>
                        <option value="2">位置二</option>
                        <option value="3">位置三</option>
                    </select>
                </div>
                <div class="form-group col-md-7" id="tier">
                    <label>分类</label>
                    <div class="tier_top">
                        <select class="tier">
                            <option value="">请选择总分类...</option>
                            {volist name="list" id="v"}
                            <option value="{$v.id}">{$v.categoryname}</option>
                            {/volist}
                        </select>
                        <select class="tier_child">
                            <option value="">请选择子分类...</option>
                        </select>
                        <select class="tier_pool">
                            <option value="">请选择账号池...</option>
                        </select>
                        <div class="tier_del"><i class="fa fa-remove"></i></div>
                    </div>
                </div>
                <div class="form-group col-md-7">
                    <div class="tier_add"><i class="fa fa-plus"></i>添加分类</div>
                </div>
                <div class="form-group col-md-7" >
                    <div id="btn_save" class="btn pull-right" style="background: #18bc9c;color: #ffffff;">保存</div>
                </div>
            </form>
        </div>
    </section>
</div>
</body>
<script>
    var _num    = 1;
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadimg' //绑定元素
            ,accept:'images'
            ,exts:'jpg|png|gif|jpeg'
            ,multiple:false
            ,size: 2048
            ,auto:true
            ,url: '{:url("admin/Fodder/uploadImg")}' //上传接口
            , before: function (input) {
                loading = layer.load(2, {
                    shade: [0.2, '#000']
                });
            }
            ,done: function(res){
                layer.close(loading);
                if(res.code == 0){
                    var html = '<div class="img-top">';
                    html += '<img src="'+res.msg+'" class="margin img_list" ulink="'+res.msg+'">';
                    html += '<i ulink="'+res.parame+'" title="删除" class="del-img fa fa-trash-o"></i>';
                    html += '</div>';
                    $('#fodder-img-list').append(html);
                }else{
                    ayerAlert(res.msg);
                }

            }
            ,error: function(){
                layerAlert('系统出错，请联系管理员');
            }
        });
    });
    $(function(){
        //图片预览
        $('#fodder-img-list').on('click','.img_list',function(){
            var $_this = $(this);
            var _url = $_this.attr('ulink');
            window.open(_url);
        });
        //删除上传的图片
        $('#fodder-img-list').on('click','.del-img ',function(){
            var $_this = $(this);
            var _ulink = $_this.attr('ulink');
            $.ajax({
                type:'post',
                cache: false,
                url:"{:url('fodder/delUploadImg')}",
                data:{ulink:_ulink},
                success:function(data){
                    if(data.code == 0){
                        $_this.parent().remove();
                    }else{
                        layerAlert(data.msg);
                    }
                }
            });
        });
        //层级删除
        $('#tier').on('click','.tier_del',function(){
            var $_this = $(this);
            if(_num <=1){
                layerAlert('该层级不可删除');
            }
            if(_num>1){
                _num = _num-1;
                $_this.parent().remove();
            }
        });
        //添加层级
        $('.tier_add').click(function(){
            var html = '<div class="tier_top">';
            html += '<select class="tier">';
            html += '<option value="">请选择总分类</option>';
            html += '{volist name="list" id="v"}';
            html += '<option value="{$v.id}">{$v.categoryname}</option>';
            html += '{/volist}</option>';
            html += '</select>';
            html += '<select class="tier_child">';
            html += '<option value="">请选择子分类</option>';
            html += '</select>';
            html += '<select class="tier_pool">';
            html += '<option value="">请选择账号池</option>';
            html += '</select>';
            html += '<div class="tier_del"><i class="fa fa-remove"></i></div>';
            html += ' </div>';
            $('#tier').append(html);
            _num = _num +1;
        });
        //获取总分类下的子分类
        $('#tier').on('change','.tier',function(){
            var $_this = $(this);
            var _id = $_this.val();
            $.ajax({
                type: 'post',
                cache: false,
                url: '{:url("admin/Replyfans/getCategoryChild")}',
                data: {cid: _id},
                success: function (data) {
                    if (data.code == "0") {
                        $_this.next('.tier_child').children('option').remove();
                        var html = '<option value="">请选择子分类...</option>';
                        $_this.next('.tier_child').append(html);
                        $.each(data.info, function (index, item) {
                            var html = '<option value="' + item.id + '">' + item.categoryname + '</option>';
                            $_this.next('.tier_child').append(html);
                        });
                    }
                }
            });
        });
        //获取账号池
        $('#tier').on('change','.tier_child',function(){
            var $_this3 = $(this);
            var _id = $_this3.val();
            $.ajax({
                type: 'post',
                cache: false,
                url: '{:url("admin/Fodder/getFodderPool")}',
                data: {cid: _id},
                success: function (data) {
                    if (data.code == "0") {
                        $_this3.next('.tier_pool').children('option').remove();
                        var html = '<option value="">请选择账号池...</option>';
                        $_this3.next('.tier_pool').append(html);
                        $.each(data.info, function (index, item) {
                            var html = '<option value="' + item.id + '">' + item.poolname + '</option>';
                            $_this3.next('.tier_pool').append(html);
                        });
                    }
                }
            });
        });
        //保存
        $('#btn_save').click(function(){
            var _img_list = $('.img_list');
            var _img = [];
            $.each(_img_list,function (index,item) {
                var $_this3 = $(this);
                _img.push($_this3.attr('ulink'));
            });
            var _remark = $('#remark').val();
            if(_img == ''){
                layerAlert('请上传图片');
                return false;
            }
            var _sum = $('.tier');
            var _child = $('.tier_child');
            var _pool = $('.tier_pool');
            var _sumlist = [];
            var _childlist = [];
            var _poollist = [];
            $.each(_sum,function (index,item) {
                var $_this6 = $(this);
                if($_this6.val() == ''){
                    layerAlert('请选择总分类...',function(){
                        return false;
                    });
                }
                _sumlist.push($_this6.val());
            });
            $.each(_child,function (index,item) {
                var $_this5 = $(this);
                _childlist.push($_this5.val());
            });
            $.each(_pool,function (index,item) {
                var $_this4 = $(this);
                _poollist.push($_this4.val());
            });
            var _place = $('#place').val();
            $.ajax({
                type:'post',
                cache: false,
                url:"{:url('admin/Fodder/doAddFodderImg')}",
                data:{sumlist:_sumlist,childlist:_childlist,poollist:_poollist,place:_place,img:_img},
                success:function(data){
                    if(data.code==0){
                        layerAlert(data.msg,function(){
                            parent.relist();
                            layerParentClose();
                        });
                    }else{
                        layerAlert(data.msg);
                    }
                }
            })
        })
    });
</script>
</html>